<template>
	<view class="container">
		<u-navbar placeholder @rightClick="go('')" bg-color="#033787">
			<view slot="center" class="title" style="color: #fff;">{{$t('member.index')}}</view>
			<view slot="right">
				<u-icon name="../../static/icon/notification.png" size="32"></u-icon>
			</view>
		</u-navbar>
		<view class="user">
			<view class="info">
				<view class="left">
					<u-image show-loading :src="member.avatar" width="44px" height="44px" shape="circle"></u-image>
					<view class="item" @click="go('/pages/member/info')">
						<view class="name">{{ member.name }}</view>
						<view class="more">{{$t('member.index.supplement-info')}}</view>
					</view>
				</view>
				<view class="vip-card">
					{{$t('member.index.vip-card')}}
				</view>
			</view>
			<view class="panel">
				<view @click="go('')">
					<view class="num">586</view>
					<view class="name">{{$t('member.index.energy')}}</view>
				</view>
				<view @click="go('/pages/integral/index')">
					<view class="num">586</view>
					<view class="name">{{$t('member.index.integral')}}</view>
				</view>
				<view @click="go('')">
					<view class="num">586</view>
					<view class="name">{{$t('coupon')}}</view>
				</view>
			</view>
		</view>
		<view class="card order">
			<view class="title">
				<view>{{$t('member.index.my-order')}}</view>
				<view class="more" @click="go('/pages/order/index', 'switchTab')">
					{{$t('c.show-all')}}
					<u-icon name="arrow-right" size="22" color="#033787"></u-icon>
				</view>
			</view>
			<u-grid class="content" col="5" :border="false" align="center" @click="gridClick($event, 'orderBar')">
				<u-grid-item v-for="(item, index) in orderBar" :key="index">
					<u-icon :name="item.icon" size="64"></u-icon>
					<view class="text">{{$t(item.name)}}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="card" style="display: inline-block;">
			<view class="title">
				<view>{{$t('member.index.tool')}}</view>
				<view class="more" @click="go('')">
					{{$t('c.show-all')}}
					<u-icon name="arrow-right" size="22" color="#033787"></u-icon>
				</view>
			</view>
			<u-grid class="content" col="4" :border="false" @click="gridClick($event, 'toolBar')">
				<u-grid-item v-for="(item, index) in toolBar" :key="index">
					<u-icon :name="item.icon" size="64"></u-icon>
					<view class="text">{{$t(item.name)}}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<u-toast ref="toast"></u-toast>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				orderBar: [{
						icon: '/static/icon/order-wait-pay.png',
						name: 'order.status.wait-pay',
						url: '/pages/order/index',
						param: {status: 0}
					},
					{
						icon: '/static/icon/order.png',
						name: 'order.status.wait',
						url: '/pages/order/index',
						param: {status: 1}
					},
					{
						icon: '/static/icon/wait-delivery.png',
						name: 'order.status.wait-delivery',
						url: '/pages/order/index',
						param: {status: 2}
					},
					{
						icon: '/static/icon/delivery.png',
						name: 'order.status.delivery',
						url: '/pages/order/index',
						param: {status: 3}
					},
					{
						icon: '/static/icon/comment.png',
						name: 'order.status.comment',
						url: '/pages/order/index',
						param: {status: 4}
					}
				],
				toolBar: [{
						icon: '/static/icon/wallet.png',
						name: 'wallet.index',
						url: '/pages/wallet/index'
					},
					{
						icon: '/static/icon/integral.png',
						name: 'integral.shop',
						url: '/pages/integral/index'
					},
					{
						icon: '/static/icon/addr.png',
						name: 'member.addr',
						url: '/pages/member/addr/index'
					},
					{
						icon: '/static/icon/sales-after.png',
						name: 'order.sales-after',
						url: '/pages/order/sales-after'
					},
					{
						icon: '/static/icon/customer-service.png',
						name: 'content.customer-service',
						url: '/pages/content/customer-service'
					},
					{
						icon: '/static/icon/chat.png',
						name: 'content.chat',
						url: '/pages/content/chat'
					},
					{
						icon: '/static/icon/feedback.png',
						name: 'content.feedback-box',
						url: '/pages/content/feedback'
					},
					{
						icon: '/static/icon/questionnaire.png',
						name: 'content.questionnaire',
						url: '/pages/content/questionnaire'
					},
					{
						icon: '/static/icon/bmi.png',
						name: 'tool.bmi',
						url: '/pages/tool/bmi'
					},
					{
						icon: '/static/icon/my-comment.png',
						name: 'order.my-comment',
						url: '/pages/order/my-comment'
					},
					{
						icon: '/static/icon/setting.png',
						name: 'setting.index',
						url: '/pages/setting/index'
					}
				],
				member: {
					name: 'Daisy',
					avatar: '/static/logo.png'
				}
			}
		},
		methods: {
			gridClick(event, bar) {
				const item = this[bar][event]
				if (bar == 'orderBar') {
					if (typeof item.param != 'undefined') {
						uni.setStorageSync('orderParamTemp', item.param)
					}
					uni.switchTab({
						url: item.url
					})
				} else {
					this.go(item.url)
				}
			},
			go(url, type = 'navigateTo') {
				if (!url) {
					this.$refs.toast.show({
						message: this.$t('c.not-online')
					})
				}
				uni[type]({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.user {
		background-color: #033787;
		padding: 32rpx;
		border-radius: 0 0 36rpx 36rpx;
		color: #fff;
		height: 400rpx;

		.info {
			display: flex;
			justify-content: space-between;
			height: 84rpx;

			.left {
				display: flex;
				justify-content: space-between;

				.item {
					padding-left: 26rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-size: 30rpx;
						font-weight: 600;
					}

					.more {
						font-size: 22rpx;
					}
				}
			}

			.vip-card {
				width: 171rpx;
				height: 64rpx;
				background: #1955B2;
				border-radius: 32rpx;
				border: 1rpx solid #648CCB;
				display: flex;
				align-items: center;
				text-align: center;
				justify-content: center;
				font-size: 26rpx;
			}
		}

		.panel {
			display: flex;
			justify-content: space-between;
			padding: 70rpx 84rpx 0 84rpx;
			text-align: center;

			.num {
				font-weight: 600;
				font-size: 36rpx;
			}

			.name {
				font-size: 22rpx;
				padding-top: 8rpx;
			}
		}
	}

	.order {
		margin-top: -90rpx !important;
		margin-bottom: -8rpx !important;
	}

	.card {
		margin: 32rpx;
		padding: 24rpx 32rpx;
		border-radius: 16rpx;
		background-color: #fff;

		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #0C1626;
			font-weight: 600;
			font-size: 30rpx;
			padding-bottom: 24rpx;
			border-bottom: 1rpx solid #E9ECEF;

			.more {
				display: flex;
				align-items: center;
				font-weight: normal;
				font-size: 22rpx;
				color: #033787;
			}
		}

		.content {
			padding-top: 24rpx;

			.u-grid-item {
				margin-bottom: 32rpx;
			}

			.text {
				padding: 6rpx 0;
				font-size: 24rpx;
				color: #0C1626;
			}
		}
	}
</style>